<template>
    <div>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()">
            <Icon type="ios-arrow-back"/>
            返回
        </Button>
        <Modal
                v-model="modal"
                title="确认操作"
                width="20"
                @on-ok="handleSubmit">
            <div style="text-align:center">
                <p>是否确认保存!</p>
            </div>
        </Modal>
        <Form ref="formCustom" :model="formCustom"   :rules="ruleCustom"  :label-width="100">
        <h3>检测人信息</h3>
        <Card class="line-style">
            <div class="line-wrap">
                <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="姓名" prop="name">
                                    <i-input type="text"  v-model="formCustom.name" placeholder="请输入姓名"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="性別" prop="gender">
                                    <Select  style="width:100%" v-model="formCustom.gender"
                                             placeholder="请选择">
                                        <Option  v-for="(item,index) in sexList" :value="item.value" :key="index">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="年齡" prop="age">
                                    <i-input type="text"  v-model="formCustom.age" placeholder="请输入年齡"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="证件类型" prop="id_type">
                                    <Select  style="width:100%" v-model="formCustom.id_type"
                                             placeholder="请选择证件类型">
                                        <Option  v-for="(item,index) in cardList" :value="item.value" :key="index">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="证件号码" prop="id_num">
                                    <i-input type="text"  v-model="formCustom.id_num" placeholder="请输入证件号码"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="联系电话" prop="contact">
                                    <i-input type="text" v-model="formCustom.contact" placeholder="请输入联系电话"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="返回国" prop="from_country">
                                    <i-input type="text" v-model="formCustom.from_country" placeholder="请输入返回国"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="上报日期" prop="imp_date">
                                    <DatePicker @on-change="dateChange" :options="optionsDate" :value="formCustom.imp_date"
                                                format="yyyy-MM-dd" type="date" placeholder="请选择上报日期"></DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                </div>
            </div>
        </Card>

        <h3>检测信息</h3>
        <Card class="line-style">
            <div class="line-wrap">
                <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="样品来源" prop="sample_source">
                                    <Select  style="width:100%" v-model="formCustom.sample_source"
                                             placeholder="请选择样品来源">
                                        <Option  v-for="(item,index) in sourceList" :value="item.value" :key="index">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="采样日期" prop="sample_date">
                                    <DatePicker @on-change="dateCollectChange" :options="optionsDate"
                                                format="yyyy-MM-dd" :value="formCustom.sample_date"
                                                type="date" placeholder="选择采样日期"></DatePicker>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="异常信息" prop="exception_info">
                                    <i-input type="text" v-model="formCustom.exception_info" placeholder="请输入异常信息"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="采样结果" prop="sample_result">
                                    <Select  style="width:100%" v-model="formCustom.sample_result"
                                             placeholder="请选择采样结果">
                                        <Option  v-for="(item,index) in resultList" :value="item.value" :key="index">{{item.label}}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                        </Row>
                </div>
            </div>
        </Card>
        </Form>
        <Row justify="center" type="flex" style="margin-top: 10px" v-if="!showDetail">
            <Col>
                <Button type="primary" @click="validateForm('formCustom')">保存</Button>
            </Col>
        </Row>
    </div>
</template>

<script>
import { insert, getById, update, getDictInfoList, getDictSexInfoList, getDictCardInfoList, getDictResultInfoList } from '@/api/outbreak-management/overseas-to-shen/nucleic-acid-detection-personnel'

/*
核酸检测人员管理
 */
export default {
  data () {
    // const validateFloat = (rule, value, callback) => {
    //   const reg = /^(0|\+?[1-9][0-9]{0,8})(\.\d{1,2})?$/
    //   if (!reg.test(value)) {
    //     callback(new Error('最多只允许两位小数'))
    //   } else {
    //     callback()
    //   }
    // }
    // const validateInt = (rule, value, callback) => {
    //   if (value % 1 !== 0) {
    //     callback(new Error('请输入整数'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      optionsDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 弹窗控制
      modal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制返回按钮显隐
      showBackBtn: false,
      sourceList: [],
      sexList: [],
      cardList: [],
      resultList: [],
      // 添加表单/修改表单
      formCustom: {
        id: '',
        imp_date: '',
        name: '',
        id_type: '',
        id_num: '',
        contact: '',
        from_country: '',
        gender: '',
        sample_source: '',
        sample_date: '',
        exception_info: '',
        sample_result: ''
      },
      ruleCustom: {
        name: [
          { required: true, message: '姓名必填', trigger: 'blur' },
          { min: 0, max: 12, message: '姓名长度不能超过12', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '性别必选', trigger: 'change' }
        ],
        age: [
          { required: true, message: '年龄必填', trigger: 'blur' },
          { min: 0, max: 12, message: '年龄不能超过999', trigger: 'blur' }
        ],
        id_type: [
          { required: true, message: '证件类型必选', trigger: 'change' }
        ],
        id_num: [
          { required: true, message: '证件号必填', trigger: 'blur' },
          { min: 0, max: 32, message: '证件号长度不能超过32', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '联系电话必填', trigger: 'blur' },
          { min: 0, max: 32, message: '联系电话长度不能超过32', trigger: 'blur' }
        ],
        imp_date:
              [
                { required: true, message: '上报日期必填', trigger: 'blur' }
              ],
        from_country: [
          { required: true, message: '返回国必填', trigger: 'blur' },
          { min: 0, max: 32, message: '返回国长度不能超过32', trigger: 'blur' }
        ],
        sample_source: [
          { required: true, message: '样品来源必选', trigger: 'change' }
        ],
        sample_date: [
          { required: true, message: '采样日期必填', trigger: 'blur' }
        ],
        exception_info: [
          { required: true, message: '异常信息必填', trigger: 'blur' },
          { min: 0, max: 128, message: '返回国长度不能超过128', trigger: 'blur' }
        ],
        sample_result: [
          { required: true, message: '采样结果必选', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    validateForm (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.modal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    /**
         * 日期格式化
         */
    dateChange (date) {
      this.formCustom.imp_date = date
    },
    dateCollectChange (date) {
      this.formCustom.sample_date = date
    },
    handleSubmit () {
      this.formCustom.id = this.$route.query.id
      let requestData = this.formCustom
      if (this.$route.query.id) {
        update(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      } else {
        insert(requestData).then(({ data }) => {
          let { errcode } = data
          if (errcode === 0) {
            this.$Message.success('保存成功!')
          } else {
            this.$Message.error('保存失败!')
          }
        })
      }
    },
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
        this.showBackBtn = true
        this.editShow()
      }
    },
    editShow () {
      getById({ id: this.$route.query.id }).then(({ data }) => {
        let { data: res } = data
        console.log(res, 'res')
        this.formCustom = res
        console.log(this.formCustom, 'data')
        this.formCustom.imp_date = this.$common.moment(res.imp_date).format('YYYY-MM-DD')
        this.formCustom.sample_date = this.$common.moment(res.sample_date).format('YYYY-MM-DD')
      })
    },
    /**
       * 查询样品来源
       */
    getDictInfoList () {
      getDictInfoList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.sourceList = res
        }
      })
    },
    getDictSexInfoList () {
      getDictSexInfoList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.sexList = res
        }
      })
    },
    getDictCardInfoList () {
      getDictCardInfoList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.cardList = res
        }
      })
    },
    getDictResultInfoList () {
      getDictResultInfoList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.resultList = res
        }
      })
    }
  },
  created () {
    this.getDictInfoList()
    this.getDictSexInfoList()
    this.getDictCardInfoList()
    this.getDictResultInfoList()
    this.isEditStatus()
  }
}
</script>

<style scoped>
h3{
    margin: 10px auto;
}
</style>
